feat(PrizePool): redesign table via Table2 with collapse rework by Eetwalt · Pull Request #7688 · Liquipedia/Lua-Modules

Eetwalt · 2026-06-23T09:30:18Z

Summary

Migrate prize pool table rendering from the legacy Widget/Table to Widget/Table2 (header/body/footer sections, declarative rowspan/colspan)
Reorder columns: Participant moves directly after Place; points column now renders before qualifies; currency/points cells right-aligned
Rework collapse: class-based general-collapsible toggle rendered in the footer, replacing the per-row applyToggleExpand machinery; child classes now only supply open/close label text
Rewrite per-column prize-cell merging via a prize matrix + Array.groupAdjacentBy/Table.deepEquals, extracted into _opponentPrizeCells
Display placements as plain numbers/ranges (e.g. 1, 1-2) instead of ordinals, with colored gold/silver/bronze badges and pale row tints for top-3
Restyle stylesheet for the Table2 structure; skip the legacy JS toggle when the table is inside .prizepool-table-wrapper
Emit rowspan/colspan from Table2 Cell/CellHeader even without column definitions

How did you test this change?

dev + devtools

Before	After

Copilot

Pull request overview

This PR modernizes prize pool table rendering by migrating from the legacy table widget to Table2, updating column order/alignment, and replacing the old per-row collapse mechanism with a general-collapsible footer toggle.

Changes:

Migrate Module:PrizePool/* table output to Table2 (header/body/footer) with updated column ordering and alignment.
Rework collapse behavior to use general-collapsible + CSS-hidden rows instead of legacy injected toggle rows (and skip the legacy JS toggle for the new wrapper).
Add top-3 placement badge/tint styling and switch place display from ordinals to numeric ranges.

Reviewed changes

Copilot reviewed 10 out of 11 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
stylesheets/commons/Prizepooltable.scss	Restyles prize pool tables for Table2 structure, new top-3 visuals, and wrapper-based collapse behavior.
lua/wikis/commons/Widget/Table2/CellHeader.lua	Ensures `rowspan`/`colspan` attributes are emitted even without column definitions.
lua/wikis/commons/Widget/Table2/Cell.lua	Ensures `rowspan`/`colspan` attributes are emitted even without column definitions.
lua/wikis/commons/PrizePool/Placement.lua	Switches place display to numeric/ranges and adds badge class helper for top-3.
lua/wikis/commons/PrizePool/Base.lua	Core migration to Table2, new collapse toggle footer, and new prize-cell matrix merging logic.
lua/wikis/commons/PrizePool/Award.lua	Updates award table to Table2 and adopts new collapse label mechanism.
lua/wikis/commons/PrizePool.lua	Updates placement prize pool rendering (badges, collapse labels) and removes legacy toggle logic.
lua/wikis/commons/Placement.lua	Removes the 4th-place background class mapping.
lua/spec/prize_pool_spec.lua	Updates test expectations to match new prize column sort order.
javascript/commons/Prizepooltable.js	Skips legacy toggle injection for the redesigned Table2 prize pool wrapper to avoid duplicate toggles.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Eetwalt · 2026-06-23T09:51:22Z

+		local cell = reward and prizeTypeData.rowDisplay(prize.data, reward) or TableCell{}

-		previousPlacement = placement
-	end
+		local lastCellOfType = previousOfPrizeType[prize.type]
+		if lastCellOfType and prizeTypeData.mergeDisplayColumns then
+			if Table.isNotEmpty(lastCellOfType.props.children) and Table.isNotEmpty(cell.props.children) then


cell.props.children is never nil but empty table, so Table.isNotEmpty handles that.

maybe use Logic.isNotEmpty for more flexibility just in case?

ElectricalBoy

from a quick glance on phone

ElectricalBoy · 2026-06-23T12:43:58Z

I am somewhat confident that we cannot kick the existing styles (blame smash)

Ah.. Probably so. Reverted with some comments

ElectricalBoy

what implications does this pose to the overall memory/runtime? (was one of my concerns when I was writing #7687)
since we are at it this should also take room for currency switch into account (see #7687)

ElectricalBoy · 2026-06-24T00:30:50Z

---@protected
+--- Whether a placement's rows are hidden behind the collapse toggle.
+--- Child classes override this; the default keeps every row visible.
 ---@param placement BasePlacement
 ---@return boolean
 function BasePrizePool:applyCutAfter(placement)
-	error('Function applyCutAfter needs to be implemented by a child class of "Module:PrizePool/Base"')
+	return false
 end

---@protected
---@param placement BasePlacement?
---@param nextPlacement BasePlacement
---@param row WidgetTableRow
-function BasePrizePool:applyToggleExpand(placement, nextPlacement, row)
-	error('Function applyToggleExpand needs to be implemented by a child class of "Module:PrizePool/Base"')
+---Open/close labels for the collapse toggle. Child classes override.
+---@return {opentext: string, closetext: string}?
+function BasePrizePool:_collapseText()
+	return nil
 end


should keep @protected annotations

ElectricalBoy · 2026-06-24T00:31:40Z

+---Returns the placement-badge color class for top-3 placements, else nil.
+---Colored by the top of the range (placeStart).
+---@return string?
+function Placement:getBadgeClass()
+	if self:hasSpecialStatus() then
+		return
+	end
+	local badges = {[1] = 'placement-1', [2] = 'placement-2', [3] = 'placement-3'}
+	return badges[self.placeStart]
+end


should make use of Module:Placement

ElectricalBoy · 2026-06-24T00:33:20Z

+		&::-webkit-scrollbar {
+			display: none;
+		}


somewhat redundant as we already have scrollbar-width: none (tbf scrollbar-width itself is baseline newly available)
maybe hide this behind @supports not (scrollbar-width: none)?

ElectricalBoy · 2026-06-24T00:35:18Z

+	// The theme wrapper + `.table2__table` qualifier raise specificity above the
+	// Table2 zebra rule so the tint wins regardless of load order; `:hover` keeps it.
+	// `border-bottom: 0` drops the legacy per-place coloured row border.
+	.theme--light &.prizepooltable-placement.table2__table,
+	.theme--dark &.prizepooltable-placement.table2__table {


maybe lower table2 zebra rules' specificities with :where() instead?
not a fan of having a lot of table2-specific selectors here

ElectricalBoy · 2026-06-24T00:37:06Z

+				children = {tostring(OpponentDisplay.BlockOpponent{
+					opponent = opponent.opponentData,
+					showPlayerTeam = true,
+				})},


tostring is redundant

ElectricalBoy · 2026-06-24T00:38:19Z

+		children = {
+			Span{
+				classes = {'general-collapsible-expand-button'},
+				children = {Span{children = {collapseText.opentext, ' ', IconFa{iconName = 'expand'}}}},
 			},
-			css = {width = 'max-content'},
-			columns = headerRow:getCellCount(),
-			children = WidgetUtil.collect(headerRow, unpack(self:_buildRows()))
-		}},
+			Span{
+				classes = {'general-collapsible-collapse-button'},
+				children = {Span{children = {collapseText.closetext, ' ', IconFa{iconName = 'collapse'}}}},
+			},
+		},


could (should?) use Module:Widget/GeneralCollapsible/ChevronToggle

Needs the text so not as is, but I extended the Chevron to accept text and size inputs to make it work. Might be useful down the line in other places

what if you use data-collapsible-click-region=true?

ElectricalBoy · 2026-06-24T00:40:22Z

-			return TableCell{children = {table.concat(headerDisplay)}}
+			return TableCellHeader{children = {table.concat(headerDisplay)}, align = 'right'}


table.concat is redundant

ElectricalBoy · 2026-06-24T00:44:23Z

+---@param placement BasePlacement
+---@param opponent table
+---@return Renderable[]
+function BasePrizePool:_opponentPrizeCells(placement, opponent)


Suggested change

---@param placement BasePlacement

---@param opponent table

---@return Renderable[]

function BasePrizePool:_opponentPrizeCells(placement, opponent)

---@private

---@param placement BasePlacement

---@param opponent BasePlacementOpponent

---@return Renderable[]

function BasePrizePool:_opponentPrizeCells(placement, opponent)

ElectricalBoy · 2026-06-24T00:47:53Z

extract column definitions to separate field in prize types table instead of adding all the aligns in cells
same for opponent column too

ElectricalBoy · 2026-06-24T00:53:33Z

image export config for prize pools should be updated as well

…one)

…tor qualifiers

…ants

Eetwalt · 2026-06-25T09:22:26Z

since we are at it this should also take room for currency switch into account

This can be in a separate PR imo

hjpalpha · 2026-06-25T12:24:54Z

since we are at it this should also take room for currency switch into account

This can be in a separate PR imo

there already is #7687
but it will obviously get a shit ton of merge conflicts with this PR :P

ElectricalBoy · 2026-06-26T00:08:43Z

there already is #7687 but it will obviously get a shit ton of merge conflicts with this PR :P

there's no way that there won't be a merge conflict
that thing is grid-based :p

ElectricalBoy · 2026-06-26T00:13:43Z

+	&.prizepooltable-placement {
+		tr.table2__row--body.background-color-first-place {
+			border-bottom: 0;
+
+			&,
+			&:hover {
+				background-color: var( --prizepool-place-1-tint );
+			}
+
+			.prizepooltable-place::before {
+				background-color: var( --prizepool-place-1-accent );
+			}
+		}
+
+		tr.table2__row--body.background-color-second-place {
+			border-bottom: 0;
+
+			&,
+			&:hover {
+				background-color: var( --prizepool-place-2-tint );
+			}
+
+			.prizepooltable-place::before {
+				background-color: var( --prizepool-place-2-accent );
+			}
+		}
+
+		tr.table2__row--body.background-color-third-place {
+			border-bottom: 0;
+
+			&,
+			&:hover {
+				background-color: var( --prizepool-place-3-tint );
+			}
+
+			.prizepooltable-place::before {
+				background-color: var( --prizepool-place-3-accent );
+			}
+		}
+	}


I think it is better to have a separate color for hovering to keep consistency with other rows (like how standings table handles hovering)

Lua-Modules/stylesheets/commons/Standings.scss

Lines 65 to 75 in 10e8def

&:hover {

> :nth-child( -n + 2 ),

&:has( > :nth-child( 2 ) > .standings-position-indicator ) > :nth-child( 3 ) {

background-color: hsl( from var( --placement-confirmed-color ) h s calc( l * 0.9 ) );

.theme--dark & {

background-color: hsl( from var( --placement-confirmed-color ) h s calc( l * 1.25 ) );

}

}

}

}

ElectricalBoy · 2026-06-26T00:15:24Z

+	&.prizepooltable-placement .prizepooltable-place {
+		text-align: center;
+		font-weight: bold;
+		color: var( --clr-secondary-25 );
+
+		// Override the legacy `… > td.prizepooltable-place` metal fill so the row
+		// tint + accent bar show through on the redesigned table instead.
+		background-color: transparent;
+
+		.theme--dark & {
+			color: var( --clr-secondary-100 );
+		}
+	}
+
+	// Top-3 rows: left accent bar (coloured, with the row tint, in the theme block below).
+	&.prizepooltable-placement {
+		tr.table2__row--body.background-color-first-place,
+		tr.table2__row--body.background-color-second-place,
+		tr.table2__row--body.background-color-third-place {
+			.prizepooltable-place {
+				position: relative;
+
+				&::before {
+					content: "";
+					position: absolute;
+					inset: 0 auto 0 0;
+					width: $prizepool-accent-width;
+				}
+			}
+		}
+	}


Suggested change

&.prizepooltable-placement .prizepooltable-place {

text-align: center;

font-weight: bold;

color: var( --clr-secondary-25 );

// Override the legacy `… > td.prizepooltable-place` metal fill so the row

// tint + accent bar show through on the redesigned table instead.

background-color: transparent;

.theme--dark & {

color: var( --clr-secondary-100 );

}

}

// Top-3 rows: left accent bar (coloured, with the row tint, in the theme block below).

&.prizepooltable-placement {

tr.table2__row--body.background-color-first-place,

tr.table2__row--body.background-color-second-place,

tr.table2__row--body.background-color-third-place {

.prizepooltable-place {

position: relative;

&::before {

content: "";

position: absolute;

inset: 0 auto 0 0;

width: $prizepool-accent-width;

}

}

}

}

&.prizepooltable-placement {

.prizepooltable-place {

text-align: center;

font-weight: bold;

color: var( --clr-secondary-25 );

// Override the legacy `… > td.prizepooltable-place` metal fill so the row

// tint + accent bar show through on the redesigned table instead.

background-color: transparent;

.theme--dark & {

color: var( --clr-secondary-100 );

}

}

// Top-3 rows: left accent bar (coloured, with the row tint, in the theme block below).

tr.table2__row--body.background-color-first-place,

tr.table2__row--body.background-color-second-place,

tr.table2__row--body.background-color-third-place {

.prizepooltable-place {

position: relative;

&::before {

content: "";

position: absolute;

inset: 0 auto 0 0;

width: $prizepool-accent-width;

}

}

}

}

ElectricalBoy · 2026-06-26T00:17:10Z

+	props = props or {}
+	local size = props.size or 'xs'


use defaultProps

Eetwalt added 21 commits June 22, 2026 10:46

order points column before qualifies

4de3589

display placements as plain numbers and ranges

bf0e623

colored number badge for top-3 placements

974a7e7

emit rowspan and colspan without column definitions

572e2ad

render via Table2 with reordered columns

9a182b4

restyle for Table2 redesign

d8983e4

migrate award variant to Table2 and drop dead collapse code

44a551d

correct collapse row offset for thead/tbody and fix stale annotations

e240501

idempotent collapse toggle and placement-based toggle label

cd88121

class-based collapse, restore legacy data-cutafter path

f1a5e99

prevent table card stretching to taller flex sibling

17d3e5f

fix toggle

52ff53c

style fixes

26b4ded

freetext align left

5d1f5f4

use standard gold/silver/bronze placement colors for top-3 badges

42693fa

tint top-3 prize pool rows with pale gold/silver/bronze

785d03a

white text for both

12f7dae

render the show places in footer & use collapsible logic

ae34ac1

wrap toggle text & icon

620808f

refactoring

17f9d69

cleanup comments

6c5e394

Eetwalt requested a review from a team as a code owner June 23, 2026 09:30

Copilot AI review requested due to automatic review settings June 23, 2026 09:30

Eetwalt requested a review from a team as a code owner June 23, 2026 09:30

Eetwalt added c: standard c: prize_pool stylesheets Changes to stylesheets javascript Changes to JavaScript files labels Jun 23, 2026

Copilot started reviewing on behalf of Eetwalt June 23, 2026 09:30 View session

chore: update visual snapshots

12cc412

Copilot AI reviewed Jun 23, 2026

View reviewed changes

Cell to CellHeader

fa032dc

ElectricalBoy reviewed Jun 23, 2026

View reviewed changes

mbergen reviewed Jun 23, 2026

View reviewed changes

Comment thread lua/wikis/commons/PrizePool/Base.lua

Comment thread lua/wikis/commons/PrizePool/Base.lua Outdated

Eetwalt added 2 commits June 23, 2026 16:04

right align points and percentages

9ef6e85

don't kick old styles

58d244c

ElectricalBoy reviewed Jun 24, 2026

View reviewed changes

Rathoz mentioned this pull request Jun 24, 2026

refactor: remove TableOld #7690

Draft

Eetwalt added 10 commits June 25, 2026 10:02

keep @Protected

0f636d4

use Module:Placement

7417e9a

gate webkit scrollbar hiding behind @supports not (scrollbar-width: n…

9966888

…one)

lower table2 zebra specificity with :where() and drop prizepool selec…

a97d5f8

…tor qualifiers

drop redundant tostring

7720c64

drop redundant table.concat

6ace7d2

annotate _opponentPrizeCells as private

09cfa11

extract column alignment into prize type definitions and column const…

930ca66

…ants

extend and use ChevronToggle

427fa0f

allow size change

6427868

Eetwalt requested a review from ElectricalBoy June 25, 2026 09:21

ElectricalBoy reviewed Jun 26, 2026

View reviewed changes

ElectricalBoy mentioned this pull request Jun 26, 2026

feat(prizepool): Redesign and currency switch for prize pools #7687

Closed

		return TableCell{children = {table.concat(headerDisplay)}}
		return TableCellHeader{children = {table.concat(headerDisplay)}, align = 'right'}

	&:hover {
	> :nth-child( -n + 2 ),
	&:has( > :nth-child( 2 ) > .standings-position-indicator ) > :nth-child( 3 ) {
	background-color: hsl( from var( --placement-confirmed-color ) h s calc( l * 0.9 ) );

	.theme--dark & {
	background-color: hsl( from var( --placement-confirmed-color ) h s calc( l * 1.25 ) );
	}
	}
	}
	}

Uh oh!

Conversation

Eetwalt commented Jun 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

How did you test this change?

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ElectricalBoy left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Eetwalt Jun 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

ElectricalBoy left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ElectricalBoy Jun 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ElectricalBoy Jun 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ElectricalBoy commented Jun 24, 2026

Uh oh!

Eetwalt commented Jun 25, 2026

Uh oh!

hjpalpha commented Jun 25, 2026

Uh oh!

ElectricalBoy commented Jun 26, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Eetwalt commented Jun 23, 2026 •

edited

Loading

Eetwalt Jun 23, 2026 •

edited

Loading

ElectricalBoy Jun 24, 2026 •

edited

Loading

ElectricalBoy Jun 24, 2026 •

edited

Loading